<template>
  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">
        <Button type="success" @click.prevent.stop="showAdd()">新增</Button>

        <Button type="info" >编辑</Button>

        <Button type="error" >删除</Button>
      </div>
      <Row>
        <i-col span="5">
          <Card class="my-18-text" style="background-color: #eee;margin-top: 10px;" dis-hover>资源名称</Card>

          <Tree :data="baseData" ></Tree>
        </i-col>
        <Col span="19">
        <Card class="my-18-text" style="background-color: #eee;margin-top: 10px;" dis-hover>资源详情</Card>
        <Row class="space">
          <Col span="12">
          上级资源：{{detail.uptitle}}
          </Col>
          <Col span="12">
          target：{{detail.icon}}
          </Col>
        </Row>
        <Row class="space">
          <Col span="12">
          资源名称：{{detail.title}}
          </Col>
          <Col span="12">
          优先级顺序：{{detail.order}}
          </Col>
        </Row>
        <Row class="space">
          <Col span="12">
          资源URL：{{detail.url}}
          </Col>
          <Col span="12">
          资源方法名：{{detail.methods}}
          </Col>
        </Row>
        <div class="distance">
          <Button type="success" @click.prevent.stop="showAdd()">新增</Button>

          <Button type="info" >编辑</Button>

          <Button type="error" >删除</Button>
        </div>
        <Table border :columns="columns1" :data="data1"></Table>
        </Col>
      </Row>
      <Page :total="20"  @on-change="changePage"></Page>
      <Modal
              v-model="showAddOrderModal"
              title="新建订单"
              ok-text="保存"
              width="650"
              @on-cancel="cancelAddOrderModal">
        <Form :model="detail" label-position="right" :label-width="80"  >
          <Row>
            <Col span="12">
            <Form-item label="机构名称">
              <Input v-model="detail.input1"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="上级机构">
              <Select v-model="model1" >
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Form-item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </Card>
    </Row>

  </div>
</template>
<style scoped>
.space{
  margin-top: 20px;
  font-weight: bolder;
}
</style>
<script type="text/ecmascript-6">

  export default {
    beforeMount () {

    },
    mounted() {

    },
    data () {
      return {
        detail:{
          input1:'',
          input2:'',
          uptitle:'一张图',
          icon:'',
          title:'地图服务',
          order:'2',
          url:'../conscription/operation.do',
          methods:'dules.conscription.action.BasicInfoAction'

        },
        showAddOrderModal:false,
        columns1: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '功能名称',
            key: 'name1'
          },
          {
            title: '功能标识',
            key: 'name2'
          }
        ],
        data1: [
          {
            name1: '搜索',
            name2: 'search'
          },
          {
            name1: '搜索',
            name2: 'search'
          },
          {
            name1: '搜索',
            name2: 'search'
          },
          {
            name1: '搜索',
            name2: 'search'
          },
          {
            name1: '搜索',
            name2: 'search'
          }
        ],
        baseData: [{
          expand: true,
          title: '全产业链大数据平台',
          children: [{
            title: '一张图展现',
            expand: true,
            children: [
              {
              title: '地图服务',
            },
              {
              title: '图层管理',
            },
              {
                title: '图层管理',
              },
              {
                title: '图层管理',
              }
            ]
          }, {
            title: '配送管理',
            expand: true,
            children: [{
              title: '智能配送',
            },{
              title: '智能配送',
            }]
          },{
            title: '设备管理',
            expand: true,
            children: [{
              title: '智能配送',
            },{
              title: '智能配送',
            }]
          },{
            title: '监控管理',
            expand: true,
            children: [{
              title: '智能配送',
            },{
              title: '智能配送',
            }]
          },{
            title: '应急指挥',
            expand: true,
            children: [{
              title: '智能配送',
            },{
              title: '智能配送',
            }]
          }]
        }],
        value2: '',
        loading:false,
        showTip:false,
        list: {},
        cityList: [
          {
            value: 'all',
            label: '全部'
          },
          {
            value: 'start',
            label: '启用'
          },
          {
            value: 'forbidden',
            label: '停用'
          }
        ],
        model1: ''
      }
    },
    methods: {
      showAdd(){
        this.showAddOrderModal = true;
      },
      cancelAddOrderModal(){
        this.showAddOrderModal = false;
      },
      changePage(num){
        console.log(num);
      }
    }

  };
</script>
